<template>
  <div class="tobBtoC">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">经营画像</div>
      </div>
    </div>
    <div>
      <el-form :inline="true" :model="form" label-width="70px" class="formList">
        <el-form-item label="账期">
          <el-date-picker v-model="form.year" type="month" placeholder="选择年" value-format="yyyyMM"></el-date-picker>
        </el-form-item>
        <el-form-item label="区域">
          <dx-cascader :area_id.sync="form.areaId" :maxLevel="2" ref="cascader" />
        </el-form-item>
        <el-form-item class="btnBox">
          <div style="margin-right: 15px">
            <el-select v-model="form.type">
              <el-option
                v-for="(item, index) in typeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
              <!-- <el-option label="县分" value="1"></el-option> -->
            </el-select>
          </div>
          <div>
            <el-button size="small" type="primary" @click="search">查询</el-button>
          </div>
          <div>
            <el-button size="small" style="margin-left: 10px" type="orange" @click="exportModal">导出</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-content clearfix">
      <div class="content">
        <span class="fileName">{{fileName}}</span>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基础数据" name="first">
            <tab1 :rowData0="tableData0" :rawTime="time" ref="tab1"></tab1>
          </el-tab-pane>
          <!-- <el-tab-pane label="完成情况" name="second">
            <tab2 :rowData1="tableData1" :rawTime="time" ref="tab2"></tab2>
          </el-tab-pane>-->
          <el-tab-pane label="得分" name="third">
            <tab3 :rowData2="tableData2" :rawTime="time" ref="tab3"></tab3>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import tab1 from "./mirror-tab1";
// import tab2 from "./mirror-tab2";
import tab3 from "./mirror-tab3";
export default {
  name: "incomeMirror",
  components: {
    tab1,
    // tab2,
    tab3,
  },
  data() {
    return {
      form: {
        year: "",
        areaId: "",
        type: "0",
      },
      activeName: "first",
      fileName: "",
      flag: 0,
      accountInfo: "",
      tableData0: [],
      tableData1: [],
      tableData2: [],
      colDefList: [],
      time: {},
      typeList: [
        {
          value: "0",
          label: "地市",
        },
        {
          value: "1",
          label: "县分",
        },
      ],
    };
  },
  watch: {
    form: {
      handler(val) {
        console.log(val);
        if (+val.areaId > 1) {
          this.form.type = "1";
          this.typeList = [
            {
              value: "1",
              label: "县分",
            },
          ];
        } else {
          this.typeList = [
            {
              value: "0",
              label: "地市",
            },
            {
              value: "1",
              label: "县分",
            }
          ];
        }
      },
      deep: true,
    },
  },
  computed: {
    params() {
      let obj = {
        token: getCookie("token"),
        areaId: this.form.areaId,
        year: this.form.year,
      };
      return obj;
    },
    areaSelect() {
      return this.form.areaSelect;
    },
  },
  created() {
    // if (this.$route.query.row) {
    //   let row = this.$route.query.row;
    //   this.form.areaId = row.areaId;
    //   this.form.year = row.accMonth;
    //   this.resourceId = true;
    // } else {
    //   this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    //   this.form.areaId = this.accountInfo.areaId;
    //   this.form.year = this.moment().format("YYYYMM");
    // }
  },
  mounted() {
    let that = this;

    that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    that.form.areaId = that.accountInfo.areaId;
    that.form.year = that.moment().subtract(1, "months").format("YYYYMM");

    this.init();
    //   $budgetAPI.toBtoCmonth(
    //     {},
    //     (res) => {
    //       if (res || res.code == 0) {
    //         this.form.year = res.content;
    //         this.init();
    //       }
    //     },
    //     (err) => {}
    //   );
  },
  methods: {
    //查询
    search() {
      let params = {
        month: this.form.year,
        areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
        type: this.form.type,
      };
      this.listResourceData(params);
    },
    //导出
    exportModal() {
      let areaId = this.form.areaId;
      let year = this.form.year;
      let token = getCookie("token");
      let type = this.form.type;

      if (this.flag == 0) {
        if (process.env.NODE_ENV == "development") {
          window.location.href =
            prefixAPI.loc +
            "/api/drawPortrait/exportDrawPortrait?token=" +
            token +
            "&areaId=" +
            areaId +
            "&month=" +
            year +
            "&type=" +
            type;
        } else if (process.env.NODE_ENV == "production") {
          window.location.href =
            prefixAPI.hp +
            "/api/drawPortrait/exportDrawPortrait?token=" +
            token +
            "&areaId=" +
            areaId +
            "&month=" +
            year +
            "&type=" +
            type;
        }
      }
      if (this.flag == 2) {
        if (process.env.NODE_ENV == "development") {
          window.location.href =
            prefixAPI.loc +
            "/api/drawPortrait/exportDrawScoreData?token=" +
            token +
            "&areaId=" +
            areaId +
            "&month=" +
            year +
            "&type=" +
            type;
        } else if (process.env.NODE_ENV == "production") {
          window.location.href =
            prefixAPI.hp +
            "/api/drawPortrait/exportDrawScoreData?token=" +
            token +
            "&areaId=" +
            areaId +
            "&month=" +
            year +
            "&type=" +
            type;
        }
      }
    },
    listResourceData(params) {
      let that = this,
        flag = that.flag,
        methods = ["incomeMirror", "incomeBasic", "incomeScore"],
        method = methods[flag];

      // that.$refs.tab1.tableLoading = true;
      // that.$refs.tab2.tableLoading = true;
      // that.$refs.tab3.tableLoading = true;
      $budgetAPI[method](
        params,
        (res) => {
          if (res.code == 0) {
            that["tableData" + flag] = res.content;
            that.time.year = params.month.substr(0, 4);
            that.time.month = params.month.substr(4, 2);
            that.time.type = params.type;
            switch (flag) {
              case 0:
                //
                that.$nextTick(() => {
                  that.$refs.tab1.tableLoading = true;
                  that.$refs.tab1.init();
                });
                // setTimeout(() => {}, 500);
                break;
              case 1:
                that.$nextTick(() => {
                  that.$refs.tab2.tableLoading = true;
                  that.$refs.tab2.init();
                });
                break;
              case 2:
                that.$nextTick(() => {
                  that.$refs.tab3.tableLoading = true;
                  that.$refs.tab3.init();
                });
                break;
            }
          } else {
            that.alertError(res);
          }
        },
        (err) => {}
      );
    },
    init() {
      let that = this,
        params = {
          month: this.form.year,
          areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
          type: this.form.type,
        };
      this.listResourceData(params);
    },
    //数据点击切换页请求不同的数据
    handleClick(tab, event) {
      let params = {
        month: this.form.year,
        areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
        type: this.form.type,
      };
      if (tab.name == "first") {
        this.flag = 0;
        this.listResourceData(params);
      }
      if (tab.name == "second") {
        this.flag = 1;
        this.listResourceData(params);
      }
      if (tab.name == "third") {
        this.flag = 2;
        this.listResourceData(params);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.newUpToDownOrganization {
  .table-content {
    .table-header {
      display: flex;
      justify-content: space-between;
      .btn-right {
        display: flex;
      }
      .table-title {
        font-size: 14px;
        font-weight: bold;
        height: 30px;
        line-height: 30px;
        span {
          display: inline-block;
          width: 5px;
          height: 5px;
          background-color: #418ee9;
          border-radius: 1000%;
          overflow: hidden;
          margin-right: 10px;
          margin-bottom: 3px;
        }
      }
    }
    .content {
      position: relative;
      .fileName {
        position: absolute;
        right: 0;
        top: 15px;
      }
    }
  }
}
</style>
<style lang="scss">
.tobBtoC {
  .formList {
    .el-form-item.btnBox {
      margin-bottom: 0px;
      width: 24%;
      margin-right: 0;
      .el-form-item__content {
        display: flex;
        width: 100%;
      }
    }
  }
  .upload-demo {
    display: inline-block;
    margin: 0 15px;
  }
}
</style>
